import React from 'react';
import { Anchor, Drawer } from 'antd';
import MarkNav from 'markdown-navbar';
import 'markdown-navbar/dist/navbar.css';
import './index.scss';
import { MenuOutlined } from '@ant-design/icons';

class InfoNavBar extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            visible: false
        }
    }
    showDrawer = () => {
        this.setState((state) => ({
            visible: true
        }))
    };
    onClose = () => {
        this.setState((state) => ({
            visible: false
        }))
    };
    setTimeOnClose = () => {
        setTimeout(() => {
            this.onClose()
        }, 800);
    }
    render() {
        // const { content } = this.props.blogData.data[0]
        const markdown = this.props.markdown
        const InfoBar = () => (
            <MarkNav
                className="article-menu"
                source={markdown}
                headingTopOffset={80}
                updateHashAuto={false}
                onNavItemClick={this.setTimeOnClose}
            />

        )
        const VNode = () => {
            if (this.props.e_width >= 1180) {
                return (
                    <div className="info-bar-container">
                        <Anchor affix={false}>
                            <div className="markNav-title">文章目录</div>
                            <InfoBar />
                        </Anchor>
                    </div>
                )
            } else {
                return (
                    <>
                        <div className="mobile-info-menu" onClick={this.showDrawer.bind(this)} >
                            <MenuOutlined />
                        </div>
                        <Drawer
                            title="文章目录"
                            placement="right"
                            closable={false}
                            onClose={this.onClose.bind(this)}
                            visible={this.state.visible}
                        >
                            <InfoBar />
                        </Drawer>
                    </>
                )
            }
        }
        return (
            <VNode />
        )
    }
}
export default InfoNavBar;